<template>
  <div class="heder">
    <my-chart :my-option="chartData"></my-chart>
    <my-chart :my-option="chartData2"></my-chart>
  </div>
  <div class="heder">
    <my-chart :my-option="chartData3"></my-chart>
    <my-chart :my-option="chartData4"></my-chart>
  </div>
  <div class="heder">
    <my-chart :my-option="chartData5"></my-chart>
  </div>
</template>
<script setup>
import myChart from "comp/myEcharts/index.vue";

import {
  defineProps,
  defineEmits,
  onMounted,
  reactive,
  ref,
  toRefs,
} from "vue";
var XData = [
  "一月",
  "二月",
  "三月",
  "四月",
  "五月",
  "六月",
  "七月",
  "八月",
  "九月",
];
var yData = [1243, 2315, 1164, 3021, 3521, 4121, 2001, 1983, 1432];
let category = [];
let dottedBase = +new Date();
let lineData = [];
let barData = [];
for (let i = 0; i < 20; i++) {
  let date = new Date((dottedBase += 3600 * 24 * 1000));
  category.push(
    [date.getFullYear(), date.getMonth() + 1, date.getDate()].join("-")
  );
  let b = Math.random() * 200;
  let d = Math.random() * 200;
  barData.push(b);
  lineData.push(d + b);
}
let state = reactive({
  chartData: {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "40",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  },
  chartData2: {
    title: [
      {
        text: "Radial Polar Bar Label Position (middle)",
      },
    ],
    polar: {
      radius: [30, "80%"],
    },
    radiusAxis: {
      max: 4,
    },
    angleAxis: {
      type: "category",
      data: ["a", "b", "c", "d"],
      startAngle: 75,
    },
    tooltip: {},
    series: {
      type: "bar",
      data: [2, 1.2, 2.4, 3.6],
      coordinateSystem: "polar",
      label: {
        show: true,
        position: "middle",
        formatter: "{b}: {c}",
      },
    },
    animation: false,
  },
  chartData3: {
    // option
    backgroundColor: "#0f375f",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["line", "bar"],
      textStyle: {
        color: "#ccc",
      },
    },
    xAxis: {
      data: category,
      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
    },
    yAxis: {
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: "#ccc",
        },
      },
    },
    series: [
      {
        name: "line",
        type: "line",
        smooth: true,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 15,
        data: lineData,
      },
      {
        name: "bar",
        type: "bar",
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
        },
        data: barData,
      },
      {
        name: "line",
        type: "bar",
        barGap: "-100%",
        barWidth: 10,
        z: -12,
        data: lineData,
      },
      {
        name: "dotted",
        type: "pictorialBar",
        symbol: "rect",
        itemStyle: {
          color: "#0f375f",
        },
        symbolRepeat: true,
        symbolSize: [12, 4],
        symbolMargin: 1,
        z: -10,
        data: lineData,
      },
    ],
  },
  chartData4: {
    title: [
      {
        text: "Radial Polar Bar Label Position (middle)",
      },
    ],
    polar: {
      radius: [30, "80%"],
    },
    radiusAxis: {
      max: 4,
    },
    angleAxis: {
      type: "category",
      data: ["a", "b", "c", "d"],
      startAngle: 75,
    },
    tooltip: {},
    series: {
      type: "bar",
      data: [2, 1.2, 2.4, 3.6],
      coordinateSystem: "polar",
      label: {
        show: true,
        position: "middle",
        formatter: "{b}: {c}",
      },
    },
    animation: false,
  },
  chartData5: {
    backgroundColor: "",
    xAxis: {
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      data: XData,
      axisLabel: {
        formatter: function (value) {
          var ret = ""; //拼接加\n返回的类目项
          var maxLength = 1; //每项显示文字个数
          var valLength = value.length; //X轴类目项的文字个数
          var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
          if (rowN > 1) {
            //如果类目项的文字大于3,
            for (var i = 0; i < rowN; i++) {
              var temp = ""; //每次截取的字符串
              var start = i * maxLength; //开始截取的位置
              var end = start + maxLength; //结束截取的位置 //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
              temp = value.substring(start, end) + "\n";
              ret += temp; //凭借最终的字符串
            }
            return ret;
          } else {
            return value;
          }
        },
        interval: 0,
        fontSize: 14,
        fontWeight: 100,
        color: "#9faeb5",
      },
      axisLine: {
        lineStyle: {
          color: "#4d4d4d",
        },
      },
    },
    yAxis: {
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      splitArea: {
        show: false,
      },

      axisLabel: {
        color: "#9faeb5",
        fontSize: 16,
      },
      axisLine: {
        lineStyle: {
          color: "#4d4d4d",
        },
      },
    },
    tooltip: {
      trigger: "axis",
      transitionDuration: 0,
      backgroundColor: "rgba(83,93,105,0.8)",
      borderColor: "#535b69",
      borderRadius: 8,
      borderWidth: 2,
      padding: [5, 10],
      formatter: function (params, ticket, callback) {
        var res = "";
        for (var i = 0, l = params.length; i < l; i++) {
          res += "" + params[i].seriesName + " : " + params[i].value + "<br>";
        }
        return res;
      },
      axisPointer: {
        type: "line",
        lineStyle: {
          type: "dashed",
          color: "#ffff00",
        },
      },
      textStyle: {
        // 提示框浮层的文本样式。
        color: "#fff",
      },
    },
    series: [
      {
        name: "共享次数",
        type: "bar",
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00d386", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#0076fc", // 100% 处的颜色
              },
            ],
            globalCoord: false, // 缺省为 false
          },
          borderRadius: 15,
        },
        label: {
          show: true,
          position: "top",
          color: "#ffc72b",
          fontSize: 10,
        },
        data: yData,
        barWidth: 16,
      },
      {
        name: "折线",
        type: "line",
        itemStyle: {
          /*设置折线颜色*/
          /* color:'#c4cddc'*/
        },
        data: yData,
      },
    ],
  },
});
const { chartData, chartData2, chartData3, chartData4, chartData5 } =
  toRefs(state);
</script>
<style lang="scss" scoped>
// 引入scss文件
@import "./home.scss";

</style>
